<!--
 * @copyright 2025 银杏ERP
 * @author 银杏ERP
 * @version 1.0
 * @license http://www.hhyx.xyz
 * @developer Lhf
-->

<template>
    <el-card shadow="hover" class="quick-actions-card">
        <template #header>
            <div class="card-header">
                <div class="title-with-icon">
                    <Icon name="fa fa-bolt" class="title-icon" />
                    <span>{{ t('快捷操作') }}</span>
                </div>
                <div class="header-actions">
                    <el-dropdown trigger="click" @command="handleCustomize">
                        <el-button link type="primary">
                            <Icon name="fa fa-cog" />
                        </el-button>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item command="customize">{{ t('自定义') }}</el-dropdown-item>
                                <el-dropdown-item command="reset">{{ t('重置') }}</el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                </div>
            </div>
        </template>
        <div class="actions-grid">
            <div v-for="(action, index) in actionsList" :key="index" class="action-item" @click="handleAction(action)">
                <div class="action-icon" :style="{ backgroundColor: action.bgColor }">
                    <Icon :name="action.icon" />
                </div>
                <div class="action-name">{{ t(action.name) }}</div>
            </div>
        </div>
    </el-card>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useI18n } from 'vue-i18n'
import { ElMessage, ElMessageBox } from 'element-plus'
import Icon from '/@/components/icon/index.vue'

const { t } = useI18n()

// 快捷操作列表
const actionsList = ref([
    {
        id: 1,
        name: '商品入库',
        icon: 'fa fa-sign-in',
        bgColor: 'rgba(30, 136, 229, 0.1)',
        color: '#1E88E5',
        action: 'inbound'
    },
    {
        id: 2,
        name: '商品出库',
        icon: 'fa fa-sign-out',
        bgColor: 'rgba(38, 166, 154, 0.1)',
        color: '#26A69A',
        action: 'outbound'
    },
    {
        id: 3,
        name: '库存调拨',
        icon: 'fa fa-exchange',
        bgColor: 'rgba(142, 36, 170, 0.1)',
        color: '#8E24AA',
        action: 'transfer'
    },
    {
        id: 4,
        name: '库存盘点',
        icon: 'fa fa-check-square-o',
        bgColor: 'rgba(251, 140, 0, 0.1)',
        color: '#FB8C00',
        action: 'inventory'
    },
    {
        id: 5,
        name: '仓库报表',
        icon: 'fa fa-bar-chart',
        bgColor: 'rgba(66, 165, 245, 0.1)',
        color: '#42A5F5',
        action: 'report'
    },
    {
        id: 6,
        name: '退货处理',
        icon: 'fa fa-undo',
        bgColor: 'rgba(239, 83, 80, 0.1)',
        color: '#EF5350',
        action: 'return'
    },
    {
        id: 7,
        name: '批次管理',
        icon: 'fa fa-tags',
        bgColor: 'rgba(156, 39, 176, 0.1)',
        color: '#9C27B0',
        action: 'batch'
    },
    {
        id: 8,
        name: '质保期预警',
        icon: 'fa fa-calendar-check-o',
        bgColor: 'rgba(244, 67, 54, 0.1)',
        color: '#F44336',
        action: 'warranty'
    },
    {
        id: 9,
        name: '仓库设置',
        icon: 'fa fa-cogs',
        bgColor: 'rgba(97, 97, 97, 0.1)',
        color: '#616161',
        action: 'settings'
    },
    {
        id: 10,
        name: '打印条码',
        icon: 'fa fa-barcode',
        bgColor: 'rgba(0, 150, 136, 0.1)',
        color: '#009688',
        action: 'barcode'
    },
    {
        id: 11,
        name: '损益处理',
        icon: 'fa fa-balance-scale',
        bgColor: 'rgba(255, 87, 34, 0.1)',
        color: '#FF5722',
        action: 'adjustment'
    },
    {
        id: 12,
        name: '数据导出',
        icon: 'fa fa-file-excel-o',
        bgColor: 'rgba(76, 175, 80, 0.1)',
        color: '#4CAF50',
        action: 'export'
    }
])

// 处理自定义操作
const handleCustomize = (command: string) => {
    if (command === 'customize') {
        ElMessage.info(t('自定义功能开发中...'))
    } else if (command === 'reset') {
        ElMessageBox.confirm(
            t('确定要重置快捷操作吗？'),
            t('提示'),
            {
                confirmButtonText: t('确定'),
                cancelButtonText: t('取消'),
                type: 'warning'
            }
        )
        .then(() => {
            ElMessage.success(t('快捷操作已重置'))
        })
        .catch(() => {})
    }
}

// 处理操作点击
const handleAction = (action: any) => {
    const actionHandlers: Record<string, () => void> = {
        inbound: () => ElMessage.success(t('跳转到商品入库页面')),
        outbound: () => ElMessage.success(t('跳转到商品出库页面')),
        transfer: () => ElMessage.success(t('跳转到库存调拨页面')),
        inventory: () => ElMessage.success(t('跳转到库存盘点页面')),
        report: () => ElMessage.success(t('跳转到仓库报表页面')),
        return: () => ElMessage.success(t('跳转到退货处理页面')),
        batch: () => ElMessage.success(t('跳转到批次管理页面')),
        warranty: () => ElMessage.success(t('跳转到质保期预警页面')),
        settings: () => ElMessage.success(t('跳转到仓库设置页面')),
        barcode: () => ElMessage.success(t('跳转到打印条码页面')),
        adjustment: () => ElMessage.success(t('跳转到损益处理页面')),
        export: () => ElMessage.success(t('跳转到数据导出页面'))
    }
    
    const handler = actionHandlers[action.action]
    if (handler) {
        handler()
    }
}
</script>

<style scoped lang="scss">
.quick-actions-card {
    margin-bottom: 20px;
    
    .card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        
        .title-with-icon {
            display: flex;
            align-items: center;
            
            .title-icon {
                color: #FF9800;
                margin-right: 8px;
                font-size: 16px;
            }
        }
        
        .header-actions {
            display: flex;
            align-items: center;
        }
    }
    
    .actions-grid {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        gap: 15px;
        
        .action-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            cursor: pointer;
            transition: transform 0.3s;
            
            &:hover {
                transform: translateY(-5px);
                
                .action-icon {
                    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
                }
            }
            
            .action-icon {
                width: 50px;
                height: 50px;
                border-radius: 10px;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 20px;
                margin-bottom: 8px;
                transition: all 0.3s;
            }
            
            .action-name {
                font-size: 12px;
                color: #606266;
                text-align: center;
            }
        }
    }
}

@media screen and (max-width: 1400px) {
    .quick-actions-card {
        .actions-grid {
            grid-template-columns: repeat(4, 1fr);
        }
    }
}

@media screen and (max-width: 992px) {
    .quick-actions-card {
        .actions-grid {
            grid-template-columns: repeat(3, 1fr);
        }
    }
}

@media screen and (max-width: 768px) {
    .quick-actions-card {
        .actions-grid {
            grid-template-columns: repeat(2, 1fr);
        }
    }
}
</style> 